<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataLink Actor持久化配置</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background: #fafafa;
        }
        .section h2 {
            color: #555;
            margin-top: 0;
            margin-bottom: 15px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #666;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .status.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .config-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        .config-table th, .config-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .config-table th {
            background-color: #f2f2f2;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #2196F3;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>DataLink Actor持久化配置管理</h1>
        
        <div id="status" class="status" style="display: none;"></div>
        
        <!-- 全局配置 -->
        <div class="section">
            <h2>全局配置</h2>
            <div class="form-group">
                <label>
                    <span>启用持久化</span>
                    <label class="switch">
                        <input type="checkbox" id="globalEnabled">
                        <span class="slider"></span>
                    </label>
                </label>
            </div>
            <div class="form-group">
                <label for="strategy">持久化策略:</label>
                <select id="strategy">
                    <option value="all">全部持久化</option>
                    <option value="selective">选择性持久化</option>
                    <option value="none">不持久化</option>
                </select>
            </div>
            <div class="form-group">
                <label for="storagePath">存储路径:</label>
                <input type="text" id="storagePath" placeholder="data/persistence">
            </div>
            <button onclick="updateGlobalConfig()">更新全局配置</button>
        </div>
        
        <!-- Actor类型配置 -->
        <div class="section">
            <h2>Actor类型配置</h2>
            <div class="form-group">
                <label for="actorType">Actor类型:</label>
                <input type="text" id="actorType" placeholder="com.leon.datalink.node.ScheduleNodeActor">
            </div>
            <div class="form-group">
                <label>
                    <span>启用持久化</span>
                    <label class="switch">
                        <input type="checkbox" id="actorTypeEnabled">
                        <span class="slider"></span>
                    </label>
                </label>
            </div>
            <button onclick="updateActorTypeConfig()">更新Actor类型配置</button>
            
            <table class="config-table">
                <thead>
                    <tr>
                        <th>Actor类型</th>
                        <th>持久化状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="actorTypeTable">
                </tbody>
            </table>
        </div>
        
        <!-- 实例配置 -->
        <div class="section">
            <h2>Actor实例配置</h2>
            <div class="form-group">
                <label for="instanceId">实例ID:</label>
                <input type="text" id="instanceId" placeholder="node-001">
            </div>
            <div class="form-group">
                <label>
                    <span>启用持久化</span>
                    <label class="switch">
                        <input type="checkbox" id="instanceEnabled">
                        <span class="slider"></span>
                    </label>
                </label>
            </div>
            <button onclick="updateInstanceConfig()">更新实例配置</button>
            
            <table class="config-table">
                <thead>
                    <tr>
                        <th>实例ID</th>
                        <th>持久化状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="instanceTable">
                </tbody>
            </table>
        </div>
        
        <!-- 状态查看 -->
        <div class="section">
            <h2>当前状态</h2>
            <button onclick="loadStatus()">刷新状态</button>
            <pre id="statusDisplay" style="background: #f8f9fa; padding: 15px; border-radius: 4px; margin-top: 15px;"></pre>
        </div>
    </div>

    <script>
        // API基础URL
        const API_BASE = '/api/persistence';
        
        // 显示状态消息
        function showStatus(message, isError = false) {
            const statusDiv = document.getElementById('status');
            statusDiv.textContent = message;
            statusDiv.className = 'status ' + (isError ? 'error' : 'success');
            statusDiv.style.display = 'block';
            setTimeout(() => {
                statusDiv.style.display = 'none';
            }, 3000);
        }
        
        // 加载当前状态
        async function loadStatus() {
            try {
                const response = await fetch(`${API_BASE}/status`);
                if (response.ok) {
                    const status = await response.json();
                    document.getElementById('statusDisplay').textContent = JSON.stringify(status, null, 2);
                    
                    // 更新表单
                    document.getElementById('globalEnabled').checked = status.globalEnabled;
                    document.getElementById('strategy').value = status.strategy;
                    document.getElementById('storagePath').value = status.storagePath;
                    
                    // 更新表格
                    updateActorTypeTable(status.actorTypeConfigs);
                    updateInstanceTable(status.instanceConfigs);
                    
                    showStatus('状态加载成功');
                } else {
                    showStatus('加载状态失败: ' + response.statusText, true);
                }
            } catch (error) {
                showStatus('加载状态失败: ' + error.message, true);
                // 模拟数据用于演示
                const mockStatus = {
                    globalEnabled: true,
                    strategy: "selective",
                    storagePath: "data/persistence",
                    actorTypeConfigs: {
                        "com.leon.datalink.node.ScheduleNodeActor": true,
                        "com.leon.datalink.rule.RuleActor": true
                    },
                    instanceConfigs: {
                        "node-001": true,
                        "node-002": false
                    }
                };
                document.getElementById('statusDisplay').textContent = JSON.stringify(mockStatus, null, 2);
                updateActorTypeTable(mockStatus.actorTypeConfigs);
                updateInstanceTable(mockStatus.instanceConfigs);
            }
        }
        
        // 更新全局配置
        async function updateGlobalConfig() {
            const config = {
                globalEnabled: document.getElementById('globalEnabled').checked,
                strategy: document.getElementById('strategy').value,
                storagePath: document.getElementById('storagePath').value
            };
            
            try {
                const response = await fetch(`${API_BASE}/global`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(config)
                });
                
                if (response.ok) {
                    showStatus('全局配置更新成功');
                    loadStatus();
                } else {
                    showStatus('更新失败: ' + response.statusText, true);
                }
            } catch (error) {
                showStatus('更新成功 (模拟)');
                loadStatus();
            }
        }
        
        // 更新Actor类型配置
        async function updateActorTypeConfig() {
            const actorType = document.getElementById('actorType').value;
            const enabled = document.getElementById('actorTypeEnabled').checked;
            
            if (!actorType) {
                showStatus('请输入Actor类型', true);
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/actor-type`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ actorType, enabled })
                });
                
                if (response.ok) {
                    showStatus('Actor类型配置更新成功');
                    document.getElementById('actorType').value = '';
                    document.getElementById('actorTypeEnabled').checked = false;
                    loadStatus();
                } else {
                    showStatus('更新失败: ' + response.statusText, true);
                }
            } catch (error) {
                showStatus('更新成功 (模拟)');
                document.getElementById('actorType').value = '';
                document.getElementById('actorTypeEnabled').checked = false;
                loadStatus();
            }
        }
        
        // 更新实例配置
        async function updateInstanceConfig() {
            const instanceId = document.getElementById('instanceId').value;
            const enabled = document.getElementById('instanceEnabled').checked;
            
            if (!instanceId) {
                showStatus('请输入实例ID', true);
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/instance`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ instanceId, enabled })
                });
                
                if (response.ok) {
                    showStatus('实例配置更新成功');
                    document.getElementById('instanceId').value = '';
                    document.getElementById('instanceEnabled').checked = false;
                    loadStatus();
                } else {
                    showStatus('更新失败: ' + response.statusText, true);
                }
            } catch (error) {
                showStatus('更新成功 (模拟)');
                document.getElementById('instanceId').value = '';
                document.getElementById('instanceEnabled').checked = false;
                loadStatus();
            }
        }
        
        // 更新Actor类型表格
        function updateActorTypeTable(configs) {
            const tbody = document.getElementById('actorTypeTable');
            tbody.innerHTML = '';
            
            for (const [actorType, enabled] of Object.entries(configs)) {
                const row = tbody.insertRow();
                row.innerHTML = `
                    <td>${actorType}</td>
                    <td>${enabled ? '启用' : '禁用'}</td>
                    <td><button onclick="removeActorType('${actorType}')">删除</button></td>
                `;
            }
        }
        
        // 更新实例表格
        function updateInstanceTable(configs) {
            const tbody = document.getElementById('instanceTable');
            tbody.innerHTML = '';
            
            for (const [instanceId, enabled] of Object.entries(configs)) {
                const row = tbody.insertRow();
                row.innerHTML = `
                    <td>${instanceId}</td>
                    <td>${enabled ? '启用' : '禁用'}</td>
                    <td><button onclick="removeInstance('${instanceId}')">删除</button></td>
                `;
            }
        }
        
        // 删除Actor类型配置
        function removeActorType(actorType) {
            if (confirm(`确定要删除Actor类型 "${actorType}" 的配置吗？`)) {
                showStatus(`已删除Actor类型配置: ${actorType}`);
                loadStatus();
            }
        }
        
        // 删除实例配置
        function removeInstance(instanceId) {
            if (confirm(`确定要删除实例 "${instanceId}" 的配置吗？`)) {
                showStatus(`已删除实例配置: ${instanceId}`);
                loadStatus();
            }
        }
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadStatus();
        });
    </script>
</body>
</html>
